<template>
    <div class="cart-item" @click="$emit('click')">
        <div class="cart-item-title">{{title}}</div>
        <div class="cart-item-right" v-if="subHead">
            <span class="h5lineHeight">{{subHead}}</span>
            <i class="fa fa-angle-right"></i>
        </div>
    </div>
  </template>

<script>
    export default {
        name: 'cartItem',
        props: {
            title: String,
            subHead: String,
        }
    }
</script>

<style scoped>
    .h5lineHeight {
        display: flex;
        align-items: center;
        justify-content: left;
        line-height: normal;
    }
    
    .cart-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4.266667vw 0;
        font-size: 1rem;
        color: #333;
        border-bottom: 1px dotted #eee;
    }
    
    .cart-item-title {
        font-weight: 500;
        flex: none;
    }
    
    .cart-item-right {
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        color: #bbb;
        font-size: 0.9rem;
        max-width: 69.333333vw;
    }
    
    .cart-item-right>span {
        text-overflow: ellipsis;
        overflow: hidden;
        flex-grow: 1;
        white-space: nowrap;
    }
    
    .cart-item-right>i {
        font-size: 1.2rem !important;
        margin-left: 5px;
    }
</style>